{% extends 'base.html' %}

{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <h2>机房日志列表</h2>
            </div>
            <div class="col-lg-6">
                <div class="alert alert-heading text-lg-center">现在时间是：<span id="localTime"
                                                                            class="font-weight-bold"></span></div>
            </div>
            <div class="col-lg-3">
                <div class="btn-group">
                    {% now "Ymd" as date %}
                    {% if has_today_am_log %}
                        <a title="修改{{ now|date:'Y-m-d' }} 上午日志" class="btn btn-success"
                           href="{% url 'update_lablog' date 1 %}">上午日志已添加</a>
                    {% else %}
                        <a title="添加{{ now|date:'Y-m-d' }} 上午日志" class="btn btn-primary"
                           href="{% url 'create_lablog' date 1 %}">添加上午日志</a>
                    {% endif %}
                    {% if has_today_pm_log %}
                        <a title="修改{{ now|date:'Y-m-d' }} 下午日志" class="btn btn-success"
                           href="{% url 'update_lablog' date 2 %}">下午日志已添加</a>
                    {% else %}
                        {% now "A" as time %}
                        {% if time == "PM" %}
                            <a title="添加{{ now|date:'Y-m-d' }} 下午日志" class="btn btn-primary"
                               href="{% url 'create_lablog' date 2 %}">添加下午日志</a>
                        {% else %}
                            <span title="请在中午12:00以后刷新页面再添加" class="btn btn-secondary">添加下午日志</span>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <table class="table table-striped mb-4">
            <thead class="thead-inverse">
            <tr>
                <th>记录时间</th>
                <th>机房温度°</th>
                <th>机房湿度°</th>
                <th>人机交互室温度°</th>
                <th>人机交互室湿度°</th>
                <th>行业网延迟(ms)</th>
                <th>行业网掉包率(%)</th>
                <th>值班人</th>
            </tr>
            </thead>
            <tbody>
            {% for lablog in lablog_list %}
                <tr>
                    <td>{{ lablog.log_date }} - {{ lablog.get_time_slot_display }} {{ lablog.log_time }}</td>
                    <td>{{ lablog.lab_template }}</td>
                    <td>{{ lablog.lab_humidity }}</td>
                    <td>{{ lablog.hc_room_template }}</td>
                    <td>{{ lablog.hc_room_humidity }}</td>
                    <td>{{ lablog.network_delay }}</td>
                    <td>{{ lablog.packet_lose_rate }}</td>
                    <td></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock content %}

{% block script %}
    <script type="text/javascript">
        $(document).ready(function () {
            getServerTime();
            setInterval(function () {
                getServerTime();
            }, 600000);
        });

        function getServerTime() {
            $.ajax({
                url: "/logs/ajax/server_now/",
                type: "GET",
                success: function (data) {
                    console.log(data.server_time);
                    date = new Date(data.server_time).valueOf();
                    var timeDiff = new Date().valueOf() - date;

                    function serverTime() {
                        this.date = new Date();
                        this.date.setTime(new Date().valueOf() - timeDiff);
                        this.year = this.date.getFullYear();
                        this.month = this.date.getMonth() + 1;
                        this.day = this.date.getDate();
                        this.hour = this.date.getHours() < 10 ? "0" + this.date.getHours() : this.date.getHours();
                        this.minute = this.date.getMinutes() < 10 ? "0" + this.date.getMinutes() : this.date.getMinutes();
                        this.second = this.date.getSeconds() < 10 ? "0" + this.date.getSeconds() : this.date.getSeconds();
                        var s = this.year + '年' + this.month + '月' + this.day + '日 ' + this.hour + ':' + this.minute + ':' + this.second;
                        console.log(s);
                        $("#localTime").html(s);
                    };
                    var num = 0;
                    var i = setInterval(function () {
                        serverTime();
                        num++;
                        if (num >= 600)
                            clearInterval(i);
                    }, 1000);
                }
            })
        };
    </script>
{% endblock script %}
